<!--
/**
* Author: KSJ
* Date: 2022-07-28 19:40
* Desc: 日期组件
*/
-->
<!-- by your name -->
<template>
  <view class="dateTab flex">
    <view
      @click="handClick(index, item)"
      class="date-item flex-1 flex"
      :class="{ active: activeIndex == index }"
      v-for="(item, index) in list"
      :key="index"
    >
      <view class="week fs26">{{ item.week }}</view>
      <view class="day fs26">{{ item.isNow ? '今' : item.day }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: '',
    props: {
      list: {
        type: Array
      },
      value: {
        type: [String, Number],
        default: 0
      }
    },

    data() {
      return {
        clickIndex: 0
      }
    },
    watch: {},
    computed: {
      activeIndex: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    methods: {
      handClick(index, item) {
        this.activeIndex = index
        this.$emit('change', item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dateTab {
    overflow-x: hidden;
    width: 100%;
    padding-bottom: 18rpx;
    border-top: solid 1rpx #eeeeee;
    padding-top: 20rpx;
    .date-item {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      .week {
        margin-bottom: 14rpx;
      }
      .day {
        width: 46rpx;
        height: 46rpx;
        border-radius: 50%;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .active {
      .week {
        color: #3bc5d2;
      }
      .day {
        color: #fff;
        background: linear-gradient(130deg, #55baff 0%, #23e6d8 100%);
      }
    }
  }
</style>
